<template>
    <PCard :isCardBorder="false" :shadow="'never'" :bodyStyle="{width: '100%'}">
      <PCard :isCardBorder="false" :shadow="'never'"  :isHeadBottomBorder="true" :bodyStyle="{width: '100%'}">
        <div slot="header" class="card-title">
          <span>{{qsbDetails.entName}}</span>
          <a-button @click="goBack" type="primary" style="float: right;">返 回</a-button>
        </div>
        <PageForm ref="qyxxForm" :formKey="formKey_qyxx" :formEvent="(...args) => { formEvent('qyxxForm', ...args) }"
              :formConfig="pageFormDefaultConfig" :itemList="formList.defaultForm"></PageForm>
      </PCard>

      <PCard :isCardBorder="false" :shadow="'never'"  :isHeadBottomBorder="true" :bodyStyle="{width: '100%'}">
        <div slot="header" class="card-title jdt-title">
          <span>开设进度</span>
          <div>
            <a-button v-if="[10,11,12,20].includes(qsbDetails.status)"  type="danger" ghost style="margin: 0;" @click="showDeleteEvent">删除企业信息</a-button>
            <a-button type="link" style="margin: 0;" @click="endServiceConfig.visible=!endServiceConfig.visible">申请终止业务</a-button>
          </div>
        </div>
        <div v-if="showSuccess" class="completed-con">
          <a-result
            status="success"
            title="恭喜您！已完成企业设立全部流程！"
          >
            <template #extra>
             <div style="width: 100%; display: flex; justify-content: center;">
                <a-button style="width: 150px; margin: 30px 100px;" type="primary" @click="gotoDetail"> 查看企业信息 </a-button>
                <a-button style="width: 150px; margin: 30px 100px;" type="primary" @click="gotoDetailKP">企业开票 </a-button>
             </div>
            </template>
          </a-result>
        </div>
        <div v-if="!showSuccess" style="width: 100%;padding: 10px 20px;">
          <Tips :isHtml="false" type="warning"> <span>带有“<my-icon :type="'icon-yonghuhuaxiang'" theme="twoTone" :twoToneColor="'#faad14'"/>”标记的步骤，需要市场主体负责人配合！</span></Tips>
        </div>
        <TimeLineCard v-if="!showSuccess" :config="{setCorporateAccounts:true,protocolType:qsbDetails.protocolType, dataType:1, timeLineEvent, data:entDetailProgress, registOrderNo}" :title="'注册信息采集'" :nodeList="entDetailProgress.collectProgress"></TimeLineCard>
        <TimeLineCard v-if="!showSuccess" :config="{setCorporateAccounts:false,protocolType:qsbDetails.protocolType, dataType:2, timeLineEvent, data:entDetailProgress,registOrderNo}" :title="'工商注册'" :nodeList="entDetailProgress.registProgress"></TimeLineCard>
        <TimeLineCard v-if="!showSuccess" :config="{setCorporateAccounts:false,protocolType:qsbDetails.protocolType, dataType:3, timeLineEvent, data:entDetailProgress,registOrderNo}" :title="'税务登记'" :nodeList="entDetailProgress.taxProgress"></TimeLineCard>
      </PCard>
      <a-modal v-model="endServiceConfig.visible" :title="endServiceConfig.title" :footer="null" :width="600">
        <div style="width:100%; height:400px; display: flex; justify-content: flex-start; align-items: center; flex-direction: column;">
          <div style="width:100%;height:40px; display: flex; justify-content: center;align-items: center;">若你需要终止此项业务，请扫码联系工作人员！</div>
          <div style="width:100%;flex:1; display: flex; justify-content: center;align-items: center;">
            <img :src="endServiceConfig.imgUrl" alt="" style="width:300px;height:300px;">
          </div>
          <div style="width:100%;height:40px; display: flex; justify-content: center;align-items: center;">或拨打客服热线：{{endServiceConfig.telephoneNum}}</div>
        </div>
      </a-modal>


      <a-modal v-model="endServiceConfig1.visible" :title="endServiceConfig1.title" :maskClosable="false" @cancel="endServiceConfigCancel" :footer="null" :width="600">
        <div v-if="endServiceConfig1.isDelete==true" style="width:100%; height: 200px; display: flex; justify-content: space-between; align-items: center; flex-direction: column;">
          <div style="width:100%;height:40px; display: flex; justify-content: flex-start; align-items: center; color: #ff4d4f;font-size: 18px; font-weight: bold;"><a-icon type="exclamation-circle" style="margin-right: 5px;" />企业信息删除后不可恢复，请谨慎操作！</div>
          <div style="width:100%;height:40px; display: flex; justify-content: center;align-items: center;">
            <a-button style="margin: 0 5px;" type="danger" block @click="pageEvent('delEntInfo',endServiceConfig1.entId)"> 删除</a-button>
            <a-button style="margin: 0 5px;" type="primary" block  @click="endServiceConfig1.visible=!endServiceConfig1.visible"> 取消 </a-button>
          </div>
        </div>
        <div v-if="endServiceConfig1.isDelete==false" style="width:100%; height: 200px; display: flex; justify-content: space-between; align-items: center; flex-direction: column;">
          <div style="width:100%;height:40px; display: flex; justify-content: flex-start; align-items: center; color: rgb(43, 162, 69);font-size: 18px; font-weight: bold;"><a-icon type="check-circle" style="margin-right: 5px;" />企业信息删除成功！</div>
          <div style="width:100%;height:40px; display: flex; justify-content: center;align-items: center; padding: 0 100px;">
            <a-button style="margin: 0 5px;" type="primary" block @click="gotoList"> 返回企业列表</a-button>
          </div>
        </div>
      </a-modal>
    </PCard>



</template>

<script>
import UUID from './../../../utils/uuid'
// import AuditDetailsFooter from '@/views/common/auditDetailsFooter'
import detailConfig from './util/configData'
import Tips from './component/tips.vue'
import pageEvent from './util/pageEvent'
import TimeLineCard from './component/TimeLineCard.vue'
import { Icon } from 'ant-design-vue';
const screenPixelRatio = () =>{
  const devicePixelRatio_ = window.devicePixelRatio
  const screenWidth = window.screen.width
  const oldDevicePixel = devicePixelRatio_ * screenWidth
  const tempList = {
    "1920 1":4,
    "1280 1.5":3,
    "1536 1.25":3,
    "1098 1.75":2,
  }
  let res = 0
  if(oldDevicePixel >=1920){
    res = tempList[`${screenWidth} ${devicePixelRatio_}`]
  }
  return res
}

// console.log(window.screen.width , window.devicePixelRatio);

const formKey_qyxx = UUID()
const pageFormConfig_ = {
  columnCount: 3,
  layout: 'horizontal',
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
  rowAttr:{
    // type:'',
    // justify:'',
    // gutter:'',
    // align:'',
  },
  celAttr:{
    // flex:'',
    // offset:'',
    // order:'',
    // pull:'',
    // push:'',
    span:8,
    // xxl:{},
  }
}
// labelCol: { xxl: 10, xl:9 }, wrapperCol: {  xxl: 14, xl: 15 }
const formItemConfig0 = {
  labelAlign:'left',
  labelCol: { xxl: 6, xl:5 },
  wrapperCol:  { xxl: 18, xl: 19 },
  // labelCol: { xxl: 2, xl:5 },
  // wrapperCol:  { xxl: 20, xl: 19 },
}
const formItemConfig = {
  labelAlign:'left',
  labelCol: { xxl: 6, xl:5 },
  wrapperCol:  { xxl: 18, xl: 19 },
}
const formItemConfig2 = {
  labelCol: { xxl: 9, xl:6 },
  wrapperCol:  { xxl: 15, xl: 18 },
}
const formItemConfig3 = {
  labelCol: { xxl: 9, xl:10 },
  wrapperCol:  { xxl: 15, xl: 12 },
}
const formItemConfig1 = {
  labelCol: { span: 2 },
  wrapperCol: {span: 20 },
}

const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_3709892_q0uwo0tc0g.js'//'@/assets/fonts/iconfont.js', // 在 iconfont.cn 上生成  'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' //
});

export default {
  name: 'enterpriseDetails',
  // components:{AuditDetailsFooter,Tips},
  components:{Tips,TimeLineCard,MyIcon},
  data() {
    return {
      showSuccess:false,
      endServiceConfig:{
        visible:false,
        title:'申请终止业务',
        imgUrl:'https://cdn.zxjztech.com/assets/zxy/service03.png',
        telephoneNum:'400-969-1110'
      },
      endServiceConfig1:{
        visible:false,
        title:'删除企业信息',
        isDelete:true,
        entId:''
      },
      tempDetailConfig:detailConfig,
      formKey_qyxx: formKey_qyxx,
      pageFormDefaultConfig: pageFormConfig_,
      detailTableColumnList:detailConfig.detailTableColumnList,
       // 税种征收方式 0-未设置 1-查账征收 2-核定征收-双定 3-核定征收-征收率 4-核定征收-应纳税所得率
      //20230901 用于判断 年度开票额度 的取值  当 核定税种 为 【核定征收-双定】 时 需要查询接口 否则为默认的 470万元
      // 20231103  双定模式用户，月开票额度字段后方金额修改为展示固定文字：“增值税、个人所得税双免政策额度内”
      taxMode:'',
      formList: {
        defaultForm: [
          { enName: 'invoiceMaxDesc', cnName: '年度开票额度', type: 'label', value: '',monoRow:false,itemAttr: { style:'font-size: 25px; font-weight: 700;'}, formItemAttr: { ...formItemConfig0 } },
          { enName: 'protocolType11', cnName: '', type: 'label', value: '',itemAttr: { style:'font-size: 14px; font-weight: 700;'}, formItemAttr: { ...formItemConfig } },
          { enName: 'protocolType', cnName: '合作模式', type: 'label', value: '',itemAttr: { style:'font-size: 14px; font-weight: 700;'}, formItemAttr: { ...formItemConfig } },
          { enName: 'entId', cnName: '企业ID', type: 'label', value: '', formItemAttr: { ...formItemConfig } },
          { enName: 'taxMode', cnName: '核定税种', type: 'textGroup', value: [
            // { type: 'text', label: '待定', border: true, isEvent: true },
            // { type: 'link', label: '下载核定通知书', isEvent: true },
          ], itemAttr: { addonAfter: '@@' }, formItemAttr: { ...formItemConfig } },
          { enName: 'registerType', cnName: '企业类型', type: 'label', value: '', formItemAttr: { ...formItemConfig } },
          { enName: 'legalName', cnName: '企业负责人', type: 'label', value: '', formItemAttr: { ...formItemConfig } },
          // { enName: 'legalPhone', cnName: '负责人手机', type: 'label', value: '', formItemAttr: { ...formItemConfig } },
          // { enName: 'serviceStart|serviceEnd', cnName: '服务期限', type: 'label', value: '', formItemAttr: { ...formItemConfig } },
          { enName: 'businessPhone', cnName: '工商注册手机号', type: 'label', value: '', formItemAttr: { ...formItemConfig } },
          { enName: 'legalPhone', cnName: '负责人实名手机号', type: 'label', value: '', formItemAttr: { ...formItemConfig } },
        ],
        otherForm:[
          { enName: 'entName', cnName: '企业名称', type: 'label', value: '', formItemAttr: { ...formItemConfig2 } },
          { enName: 'lisenceCreditCode', cnName: '社会信用统一代码', type: 'label', value: '', itemAttr: { addonAfter: '' }, formItemAttr: { ...formItemConfig3 } },
          { enName: 'createTime', cnName: '注册时间', type: 'label', value: '', formItemAttr: { ...formItemConfig2 } },
          { enName: 'bankName', cnName: '开户行', type: 'label', value: '', formItemAttr: { ...formItemConfig2 } },
          { enName: 'legalName', cnName: '企业负责人', type: 'label', value: '', formItemAttr: { ...formItemConfig2 } },
          { enName: 'legalPhone', cnName: '负责人手机', type: 'label', value: '', formItemAttr: { ...formItemConfig2 } },
          { enName: 'cardNumber', cnName: '负责人身份证号', type: 'label', value: '', formItemAttr: { ...formItemConfig3 } },
          { enName: 'bankAccountNo', cnName: '银行账户', type: 'label', value: '', formItemAttr: { ...formItemConfig2 } },
          { enName: 'lisenceAddress', cnName: '经营场所', type: 'label', monoRow:true,value: '', formItemAttr: { ...formItemConfig1 } },
          { enName: 'lisenceMgrNature', cnName: '经营范围', type: 'label', monoRow:true,value: '', formItemAttr: { ...formItemConfig1 } },
          { enName: 'licenseUrl', cnName: '营业执照', type: 'imgGroup', value:[], monoRow:true, formItemAttr: { ...formItemConfig1 } },

        ]
      },
      tableDataList:{
        //发票类型
        fpgl:[{id1:''}],
        //开票记录
        kpjl:[],
        // 企业费率
        qyfl:[],
        // 企业服务
        qyfw:[],
      },
      qsbDetails:{},
      // 开设进度（未设立状态展示）
      entDetailProgress:{},
      //订单
      registOrderNo:'',
    }
  },
  watch:{
    taxMode: {
      handler(val) {
        this.formList.defaultForm[0].cnName = '年度开票额度'
        if (!this.isType.isEmpty(val) && val == 2) {
          this.pageEvent('getTaxModeType',this.entId)
        }
      },
      deep: true,
      immediate: true
    },
  },
  mounted(){
    // const data = JSON.parse(sessionStorage.getItem('qsb-details')|| '{}')
    // console.log('qsb-details===>',data);
    // this.qsbDetails = data
    this.pageInit()
  },
  methods: {
    endServiceConfigCancel(){
      this.endServiceConfig1.visible=!this.endServiceConfig1.visible;
      this.endServiceConfig1.isDelete== false && this.gotoList()
    },
    showDeleteEvent(){
      this.endServiceConfig1.entId =this.qsbDetails.entId;
      this.endServiceConfig1.isDelete = true;
      this.endServiceConfig1.title = '删除企业信息';
      this.endServiceConfig1.visible=!this.endServiceConfig1.visible;
    },
    gotoDetail(){
      this.$router.push({
          path: '/enterprise/enterpriseList/enterpriseDetails1',
          query: {
            bizId: this.qsbDetails.entId,
          },
        })
    },
    gotoDetailKP(){
      this.$router.push({
          path: '/invoice/applyInvoice',
          query: {
            bizId: this.qsbDetails.entId,
          },
        })
    },
    gotoList(){
      this.$router.push({
        path: '/enterprise/enterpriseList/index'
      })
    },
    timeLineEvent(type,data){
      const  typeAction = {
        'Refresh':()=>{
          this.pageInit()
        },
        'gameOver':()=>{
          this.showSuccess = data
        }
      }
      typeAction[type] && typeAction[type]()

    },
    pageEvent(type, ...args) {
      return pageEvent(type, this, ...args)
    },
    /**
     * 获取企业状态
     */
    getQYState(code){
      let res = ''
      detailConfig.qystatus.forEach(item=>{
        const {enName,cnName} = item
        if(code == enName){
          res = cnName
        }
      })
      return res
    },
    formEvent(formName, type, data) {
      console.log('enterpriseDetails formEvent===>', this, formName, type, data);
      // this.$attrs.itemData.value = data
    },
    goBack() {
      this.$router.go(-1)
    },
    tableEvent(type,...args){
      console.log('tableEvent===>',type,...args);
    },
    pageInit(){
      const id = this.$route.query.bizId
      this.pageEvent('getDataForEnterpriseDetails',id,0)
    },
  }
}
</script>

<style lang="less">
// .ent-deta-con{
//   .ant-card-body{
//     overflow: auto;
//   }
// }
// .enter-detail-con {
//   width: 100%;
//   height: calc(100vh - 170px);
//   display: flex;
//   justify-content: flex-start;
//   align-items: center;
//   flex-direction: column;

//   .enter-detail-header {
//     height: 50px;
//     width: 100%;
//     padding: 5px 10px;
//     display: flex;
//     justify-content: flex-start;
//     align-items: center;
//     border-bottom: 1px solid #ccc;
//     box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

//     .detail-header {
//       flex: 1;
//       height: 100%;
//       display: flex;
//       justify-content: flex-start;
//       align-items: center;

//       .enter-name {
//         font-size: 20px;
//         font-family: PingFangSC-Semibold, PingFang SC;
//         font-weight: 600;
//         color: #333333;
//         line-height: 28px;
//         margin-right: 10px;
//       }

//       .enter-state {
//         margin-left: 10px;
//       }
//     }

//     .enter-btn {
//       width: 200px;
//       height: 100%;
//       display: flex;
//       justify-content: flex-end;
//       align-items: center;
//     }
//   }

//   .enter-detail-body {
//     flex: 1;
//     width: 100%;
//     display: flex;
//     justify-content: flex-start;
//     align-items: center;
//     flex-direction: column;

//     .body-item {
//       width: 100%;
//       flex: 1;
//       padding: 10px;
//       .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
//         padding: 8px 8px;
//       }
//     }

//     .body-item:nth-child(1) {
//       display: flex;
//       justify-content: flex-start;
//       align-items: center;

//       .btn-group {
//         height: 100%;
//         width: 100px;
//         display: flex;
//         justify-content: flex-start;
//         align-items: center;
//         flex-direction: column;
//       }
//     }

//     .body-item:nth-child(2) {
//       flex: 7;
//       .body-item-con{
//         width: 100%;
//         // height: 500px;
//         padding: 5px 10px;
//         // overflow: auto;
//         box-sizing: border-box;
//       }
//       .body-item-ant-tabs{
//         height: 100%;
//         display: flex;
//         flex-direction: column;
//         .ant-tabs-content{
//           flex: 1;
//           width: 100%;
//         }
//       }
//       .card-title{
//         font-size: 20px;
//         font-family: PingFangSC-Semibold, PingFang SC;
//         font-weight: 600;
//         color: #333333;
//       }
//     }
//   }
// }

.card-title{
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  &.jdt-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.completed-con{
  height: 600px;
  width: 100%;
  border: 1px solid #c3c3c3;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
